<template>
  <div class="cloth">
    <div class="all-flex-col-center box">
      <p class="title">登录</p>
      <el-form status-icon ref="loginForm" label-width="80px" :model="form" :rules="rules">
        <el-form-item label="手机号" prop="mobile">
          <el-input maxlength="11" placeholder="请输入手机号码（11位）" v-model.number="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="请输入密码" type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-checkbox v-model="checked" style="margin: 0 0 22px 80px">保存登录方式（有效期7天）</el-checkbox>
        <el-form-item class="all-handle-btn-box">
          <el-button type="primary" @click="handleCertain">确定</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: '',
      realPassword: [],
      form: {
        mobile: "",
        password: ""
      },
      rules: {
        mobile: {required: true, pattern: /^\d{11}$/, message: "手机号码格式有误", trigger: "change"},
        password: {required: true, message: "密码不能为空", trigger: "change"}
      }
    }
  },
  methods: {
    handleCertain() {
      let _this = this;
      this.$refs.loginForm.validate(bool => {
        if (bool) {
          //登录接口操作
          this.$ajax({
            url:"master/loginByPassword",
            data: {
              app:{
                mobile: this.form.mobile,
                password: this.form.password
              }
            },
            needToken: false, 
            success(res) {
              //0:管理员1:代理商 2:供应商 
              if (res.data.code === 1) {
                let lkUserInfo = {
                  token: res.data.content.token,
                  userId: res.data.content.userID,
                  userType: null,
                };
                let routeName = null;
                switch (res.data.content.type) {
                  case 0: 
                    lkUserInfo.userType = "super";
                    routeName = "route1";
                    break;
                  case 1:
                    lkUserInfo.userType = "agent";
                    routeName = "route33";
                    break;
                  case 2:
                    lkUserInfo.userType = "master";
                    routeName = "route34";
                    break;
                }
                _this.$alert("最好不要使用浏览器记住密码功能，可使用本页面的保存登录方式来替代", "安全提示", {
                  confirmButtonText: '确定',
                  callback: action => {
                    if (action === "confirm") {
                      _this.$store.commit("user/removeUserSign");
                      if (_this.checked) {
                        window.localStorage.lkUserInfo = JSON.stringify(lkUserInfo);
                      } else {
                        window.sessionStorage.lkUserInfo = JSON.stringify(lkUserInfo);
                      }
                      _this.$store.commit("user/setUserSign");
                      _this.$router.push({name: routeName});
                    }
                  }
                });
              } else {
                _this.$message({
                  message: res.data.msg,
                  type: "warning"
                });
              }
            }
          });
        }
      });
    },
    handleReset() {
      this.$refs.loginForm.resetFields();
    }
  }
}
</script>

<style scoped>
.cloth {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  width: 100%;
  height: 100%;
  background: url(../../assets/bg.jpg) center no-repeat;
  background-color: #fff;
}
.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 420px;
  height: 300px;
  margin: auto;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 10px;
  box-shadow: 0 0 10px 2px #999;
}
.box form {
  width: 80%;
  height: 210px;
}
.title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}
</style>
